<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D变换_旋转</title>
    <style>

        .outer{
            width: 300px;
            height: 300px;
            border:2px solid black;
            margin:520px;
            transform-style: preserve-3d;/*开启3D空间*/
            perspective: 500px;

            perspective-origin: 152px 152px;/*设置透视点的位置*/

        }
        .inner{
            width: 300px;
            height: 300px;
            background-color: rgba(0,191,225,0.7);
            /*transform: rotateX(45deg);!*2D旋转是绕着中心点旋转,3D旋转是绕着轴旋转,在盒子的右边看,是顺时针的 *!*/
            /*transform: rotateY(45deg);!*从盒子下面往上看,是顺时针*!*/
            /*transform:rotateZ(180deg);!*相当于2D变换的旋转*!*/
            transform: rotate3d(0,0,0,30deg);/*前面的三个为旋转后面的度数,前面三个的取值为0~1的数*/
        }

    </style>
</head>
<body>
<div class="outer">
    <div class="inner">inner1</div>
</div>

</body>
</html>